<div id="queryuser">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryUser")}}</h3>
        <ul>
            <li style="width: 200px;">
                <i-input v-model.trim="queryParameter" icon="ios-close-circle-outline" @on-click="cleanSearchVal"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="my-total">
            <span>{{$t("bgMgr.userTotal")}} : {{userTotal}}</span>
        </div>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="modal" width="900" :title='$t("user.editUser")'>
            <div style="width:850px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.username")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="username" disabled></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.userType")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="usertype" :disabled="usertypeDisabled">
                            <i-option v-for="item in userTypeList" :value="item.type" :key="item.type">{{ item.name }}</i-option>
                        </i-select>
                    </i-col>
                </Row>


                <Row style="margin: 10px 0" v-show="isShowGroup">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="groupids" multiple>
                            <i-option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>


                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp; {{$t("user.showname")}}: &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="showname"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp; {{$t("user.corporateName")}}: &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="companyname"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;{{$t("user.name")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="cardname"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;{{$t("user.phone")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="phone"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;{{$t("user.address")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="companyaddr"></i-input>
                    </i-col>
                </Row>


                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;QQ : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="qq"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;{{$t("user.weChat")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="wechat"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        &nbsp;{{$t("header.email")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-input v-model.trim="email"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.moreLanding")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="multilogin">
                            <i-option value="1">{{$t("header.yes")}}</i-option>
                            <i-option value="0">{{$t("header.no")}}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                    <i-col span="12">
                        <i-select v-model="state">
                            <i-option value="0">{{$t("header.yes")}}</i-option>
                            <i-option value="1">{{$t("header.no")}}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="12" :offset="4">
                        <i-button style="width:100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                </Row>

            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#queryuser",
            i18n: utils.getI18n(),
            data: {
                modal: false,
                editDeviceIndex: null,
                queryTableData: [],
                userTotal: '',
                queryParameter: "",
                loading: true,
                total: 0,
                currentIndex: 1,
                columns: [{
                    title: vRoot.$t("user.username"),
                    key: 'username',
                    width: 150,
                    render: function(h, params) {
                        var username = params.row.username;
                        return h('Poptip', {
                            props: {
                                confirm: false,
                                // title: '上级信息',
                            },
                            style: {
                                marginRight: '5px',
                            },
                        }, [
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                on: {
                                    click: function() {

                                        var url = myUrls.queryParents();
                                        var data = {
                                            currentuser: username
                                        }
                                        utils.sendAjax(url, data, function(resp) {
                                            var createrrecords = [];
                                            var records = resp.records;
                                            records.forEach(function(item) {
                                                createrrecords.push(h('div', {}, item.username + '(' + utils.getUserTypeDesc(item.usertype) + ')'))
                                            });
                                            params.row.usernamerecords = createrrecords;
                                        })
                                    }
                                }
                            }, username),
                            h(
                                'div', {
                                    slot: 'content',
                                    attrs: {
                                        slot: "content"
                                    }
                                }, params.row.usernamerecords
                            )
                        ]);
                    }
                }, {
                    title: vRoot.$t("user.userType"),
                    key: 'userTypeStr'
                }, {
                    title: vRoot.$t("user.showname"),
                    key: 'showname',
                }, {
                    title: vRoot.$t("user.corporateName"),
                    key: 'companyname'
                }, {
                    title: vRoot.$t("user.name"),
                    key: 'cardname'
                }, {
                    title: vRoot.$t("user.phone"),
                    key: 'phone'
                }, {
                    title: vRoot.$t("user.address"),
                    key: 'companyaddr'
                }, {
                    title: vRoot.$t("user.creater"),
                    width: 150,
                    render: function(h, params) {
                        var creater = params.row.creater;
                        return h('Poptip', {
                            props: {
                                confirm: false,
                                // title: '上级信息',
                            },
                            style: {
                                marginRight: '5px',
                            },
                        }, [
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                on: {
                                    click: function() {

                                        var url = myUrls.queryParents();
                                        var data = {
                                            currentuser: creater
                                        }
                                        utils.sendAjax(url, data, function(resp) {
                                            var createrrecords = [];
                                            var records = resp.records;
                                            records.forEach(function(item) {
                                                createrrecords.push(h('div', {}, item.username + '(' + utils.getUserTypeDesc(item.usertype) + ')'))
                                            });
                                            params.row.createrrecords = createrrecords;
                                        })
                                    }
                                }
                            }, creater),
                            h(
                                'div', {
                                    slot: 'content',
                                    attrs: {
                                        slot: "content"
                                    }
                                }, params.row.createrrecords
                            )
                        ]);
                    }
                }, {
                    title: vRoot.$t("user.createTime"),
                    key: 'createtime'
                }, {
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 250,
                    render: function(h, params) {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.editDeviceIndex = params.index;
                                        editObject = params.row;
                                        vueInstanse.modal = true;
                                        vueInstanse.setUserInfo();
                                        vueInstanse.setUserTypeByUser();
                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),

                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDel")
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.handleDelete(params.row.username);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ]),

                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.resetDevicePwd(params.index);
                                    }
                                }
                            }, vRoot.$t("user.resetPwd"))
                        ]);
                    }
                }],
                tableData: [],
                recordsList: [],
                username: "",
                usertype: "",
                showname: "",
                singleLogin: "0",
                phoneLogin: "0",
                weixinLogin: "0",
                multilogin: "1",
                state: "0",
                companyList: [],
                groupids: [],
                groupList: [],
                userTypeList: [],
                isShowGroup: false,
                companyname: '',
                cardname: '',
                companyaddr: '',
                qq: "",
                email: "",
                phone: "",
                wechat: "",
                taleHeight: 300,
                usertypeDisabled: false,
            },
            methods: {
                cleanSearchVal: function() {
                    this.queryParameter = '';
                },
                handlerClickQuery: function() {
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) return;
                    this.recordsList.forEach(function(record) {

                        var username = record.username,
                            // companynamePinyin = record.companynamePinyin,
                            // companynameFirstLetter = record.companynameFirstLetter,
                            userTypeStrPinyin = record.userTypeStrPinyin,
                            userTypeStrFirstLetter = record.userTypeStrFirstLetter;

                        if (
                            record.userTypeStr.indexOf(self.queryParameter) != -1 ||
                            username.toLowerCase().indexOf(queryParameterLowerCase) != -1 ||
                            // companynamePinyin.indexOf(queryParameterLowerCase) != -1 ||
                            // companynameFirstLetter.indexOf(queryParameterLowerCase) != -1 ||
                            userTypeStrPinyin.indexOf(queryParameterLowerCase) != -1 ||
                            userTypeStrFirstLetter.indexOf(queryParameterLowerCase) != -1
                        ) {
                            queryTableData.push(record);
                        }
                    })

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0, 10);
                    this.total = this.queryTableData.length;
                },
                getUserInfoList: function() {
                    var url = myUrls.queryUser();
                    utils.sendAjax(url, {
                        username: userName
                    }, this.doUserInfoList);
                },
                doUserInfoList: function(resp) {
                    if (resp.status == 0 && resp.userlists != null) {
                        var me = this;
                        var currdevicecount = 0;
                        var currgroupcount = 0;
                        resp.userlists.forEach(function(item) {

                            item.usernamerecords = [];
                            item.createrrecords = [];
                            item.userTypeStr = me.getUserTypeStr(item.usertype);
                            item.createtime = me.timeToDateStr(item.createtime);

                            // item.companynamePinyin = __pinyin.getPinyin(item.company && item.company.companyname);
                            // item.companynameFirstLetter = __pinyin.getFirstLetter(item.company && item.company.companyname);
                            item.userTypeStrPinyin = __pinyin.getPinyin(item.userTypeStr);
                            item.userTypeStrFirstLetter = __pinyin.getFirstLetter(item.userTypeStr);
                        });
                        this.recordsList = resp.userlists;

                        this.tableData = this.recordsList.slice(0, 10);
                        this.total = this.recordsList.length;
                        this.userTotal = resp.userlists.length;
                    }
                    this.loading = false;
                },
                timeToDateStr: function(time) {
                    return DateFormat.longToLocalDateTimeStr(time);
                },
                getUserTypeStr: function(type) {
                    var name = "";
                    for (var i = 0; i < this.userTypeDescrList.length; i++) {
                        var item = this.userTypeDescrList[i];
                        if (item.type == type) {
                            name = item.name;
                            break;
                        }
                    };
                    return name;
                },
                handleDelete: function(username) {
                    var me = this;
                    var url = myUrls.delUser();

                    utils.sendAjax(url, {
                        usernames: [username]
                    }, function(resp) {

                        if (resp.status == 0) {
                            vRoot.$Message.success(me.$t("message.deleteSucc"));
                            me.recordsList.forEach(function(item, index) {
                                if (item.username == username) {
                                    var delUserItem = me.recordsList[index];
                                    me.userTotal -= 1;
                                    me.$delete(me.recordsList, index);
                                }
                            });
                            me.tableData.forEach(function(item, index) {
                                if (item.username == username) {
                                    me.$delete(me.tableData, index);
                                }
                            });
                            me.total = me.recordsList.length;
                            me.tableData = me.recordsList.slice(me.currentIndex - 1, 10);
                            if (globalUserList.indexOf(username) != -1) {
                                globalUserList.splice(globalUserList.indexOf(username), 1)
                            }
                        } else if (resp.status == 1) {
                            vRoot.$Message.error(me.$t("message.deleteUserTips") + resp.count);
                        } else {
                            vRoot.$Message.error(resp.cause ? resp.cause : '');
                        }
                        me.modal = false;
                    });
                },
                resetDevicePwd: function(index) {
                    var me = this;
                    var username = this.tableData[index].username;
                    var url = myUrls.resetUserLoginPwd();
                    utils.sendAjax(url, {
                        username: username
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success(me.$t("message.resetPwdTips"));
                        } else {
                            me.$Message.error("error");
                        }
                    });
                },
                queryAllgroupsInfo: function() {
                    var url = myUrls.queryGroupByUser();
                    utils.sendAjax(url, {}, this.doQueryAllgroupsInfo);
                },
                doQueryAllgroupsInfo: function(resp) {
                    var me = this;
                    if (resp.grouplist && resp.status === 0) {
                        resp.grouplist.forEach(function(group) {
                            me.groupList.push({
                                label: group.groupname,
                                value: group.groupid
                            })
                        });
                        if (editObject.groups) {
                            editObject.groups.forEach(function(item) {
                                me.groupids.push(item.groupid);
                            });
                        }
                    }
                    me.setUserInfo();
                    me.modal = true;
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 730;
                    }
                    this.taleHeight = wHeight - 235;
                },
                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.editUser();
                    var userType = this.usertype;
                    var data = {
                        username: this.username,
                        usertype: userType,
                    }

                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {
                            if (data[key] == "" || data[key] == NaN) {
                                this.$Message.error(this.$t("message.fullComplete"));
                                return;
                            }
                        };
                    };
                    data.state = Number(this.state)
                    data.multilogin = Number(this.multilogin);
                    this.qq ? data.qq = this.qq : "";
                    this.email ? data.email = this.email : "";
                    this.phone ? data.phone = this.phone : "";
                    this.phone ? data.wechat = this.phone : "";
                    this.companyname ? data.companyname = this.companyname : null;
                    this.cardname ? data.cardname = this.cardname : null;
                    this.companyaddr ? data.companyaddr = this.companyaddr : null;
                    this.showname ? data.showname = this.showname : null;



                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            var newData = Object.assign(editObject, data);

                            me.tableData[me.editDeviceIndex] = newData;
                            utils.changeSingleItemData(me.recordsList, newData, 'username');
                            me.$Message.success(me.$t("message.changeSucc"));
                        } else {
                            me.$Message.error(me.$t("message.changeFail"));
                        }
                    });
                },
                setUserTypeByUser: function() {
                    var userType = vstore.state.userType;
                    var newArray = deepClone(vstore.state.userTypeDescrList);
                    newArray.shift();
                    newArray.pop();
                    if (userType == 0) {

                    } else if (userType == 1) {
                        newArray.shift();
                        newArray.pop();
                    } else if (userType == 2) {
                        newArray.shift();
                        newArray.shift();
                        newArray.pop();
                    } else if (userType == 3) {
                        newArray.shift();
                        newArray.shift();
                        newArray.pop();
                    } else if (userType == 4) {
                        newArray.shift();
                        newArray.shift();
                        newArray.shift();
                        newArray.pop();
                    } else {
                        newArray = [];
                    }

                    this.userTypeList = newArray;
                    this.usertype = editObject.usertype;
                    if (vRoot.$store.state.userType == 0) {
                        if (editObject.usertype === 20) {
                            this.usertypeDisabled = true;
                        } else {
                            this.usertypeDisabled = false;
                        }
                    } else {
                        this.usertypeDisabled = editObject.usertype === 20 || editObject.creater !== userName;
                    }

                },
                setUserInfo: function() {
                    this.username = editObject.username;
                    this.qq = editObject.qq;
                    this.email = editObject.email;
                    this.phone = editObject.phone;
                    this.wechat = editObject.wechat;
                    this.multilogin = String(editObject.multilogin);
                    this.state = String(editObject.state);
                    this.groupcount = editObject.groupcount;
                    this.devicecount = editObject.devicecount;
                    this.usercount = editObject.usercount;
                    this.companyname = editObject.companyname;
                    this.cardname = editObject.cardname;
                    this.companyaddr = editObject.companyaddr;
                    this.showname = editObject.showname;
                }
            },
            mixins: [mixIn],
            mounted: function() {
                var me = this;
                this.userTypeDescrList = vstore.state.userTypeDescrList;
                this.getUserInfoList();
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>